<template>
  <div class="p-grid dashboard">
    <div class="p-col-12 p-md-6 p-lg-3">
      <div class="p-grid overview-box overview-box-1">
        <div class="overview-box-title">
          <i class="pi pi-inbox"></i>
          <span>未读邮件</span>
        </div>
        <div class="overview-box-count">150</div>
        <div class="overview-box-stats">相比昨天减少12</div>
      </div>
    </div>
    <div class="p-col-12 p-md-6 p-lg-3">
      <div class="p-grid overview-box overview-box-2">
        <div class="overview-box-title">
          <i class="pi pi-map-marker"></i>
          <span>办理登记手续</span>
        </div>
        <div class="overview-box-count">532</div>
        <div class="overview-box-stats">相比昨天增加46</div>
      </div>
    </div>
    <div class="p-col-12 p-md-6 p-lg-3">
      <div class="p-grid overview-box overview-box-3">
        <div class="overview-box-title">
          <i class="pi pi-folder"></i>
          <span>档案</span>
        </div>
        <div class="overview-box-count">450</div>
        <div class="overview-box-stats">相比昨天增加30</div>
      </div>
    </div>
    <div class="p-col-12 p-md-6 p-lg-3">
      <div class="p-grid overview-box overview-box-4">
        <div class="overview-box-title">
          <i class="pi pi-user"></i>
          <span>用户</span>
        </div>
        <div class="overview-box-count">532</div>
        <div class="overview-box-stats">相比昨天增加350</div>
      </div>
    </div>

    <div class="p-col-12 p-lg-6 global-sales">
      <div class="card">
        <h5>全球销量</h5>
        <table>
          <thead>
            <tr>
              <th></th>
              <th></th>
              <th></th>
              <th>总销售</th>
              <th>趋势</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>
                <img
                  alt="Brazil Flag"
                  src="assets/layout/images/dashboard/flag-brazil.png"
                  width="45"
                />
              </td>
              <td>巴西</td>
              <td>4234</td>
              <td>+35%</td>
            </tr>
            <tr>
              <td>2</td>
              <td>
                <img
                  alt="China Flag"
                  src="assets/layout/images/dashboard/flag-china.png"
                  width="45"
                />
              </td>
              <td>中国</td>
              <td>3214</td>
              <td>-25%</td>
            </tr>
            <tr>
              <td>3</td>
              <td>
                <img
                  alt="Belgium Flag"
                  src="assets/layout/images/dashboard/flag-belgium.png"
                  width="45"
                />
              </td>
              <td>比利时</td>
              <td>2842</td>
              <td>+28%</td>
            </tr>
            <tr>
              <td>4</td>
              <td>
                <img
                  alt="France Flag"
                  src="assets/layout/images/dashboard/flag-france.png"
                  width="45"
                />
              </td>
              <td>法国</td>
              <td>1942</td>
              <td>+15%</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="p-col-12 p-lg-6 product-statistics">
      <div class="card">
        <h5>产品统计</h5>
        <table>
          <tbody>
            <tr>
              <td class="col-overview col-wait">
                <div>W</div>
              </td>
              <td class="col-status">
                <span class="status-time">最近更新: 12小时前</span>
                <span class="status-text">等待中</span>
              </td>
              <td class="col-numbers">
                <div>253 <span>发货</span></div>
                <div>584 <span>订单</span></div>
              </td>
            </tr>
            <tr>
              <td class="col-overview col-success">
                <div>S</div>
              </td>
              <td class="col-status">
                <span class="status-time">最近更新: 12小时前</span>
                <span class="status-text">成功完成</span>
              </td>
              <td class="col-numbers">
                <div>312 <span>发货</span></div>
                <div>409 <span>订单</span></div>
              </td>
            </tr>
            <tr>
              <td class="col-overview col-delay">
                <div>D</div>
              </td>
              <td class="col-status">
                <span class="status-time">最近更新: 6小时前</span>
                <span class="status-text">延迟</span>
              </td>
              <td class="col-numbers">
                <div>122 <span>发货</span></div>
                <div>341 <span>订单</span></div>
              </td>
            </tr>
            <tr>
              <td class="col-overview col-preorder">
                <div>P</div>
              </td>
              <td class="col-status">
                <span class="status-time">最近更新: 15小时前</span>
                <span class="status-text">预定</span>
              </td>
              <td class="col-numbers">
                <div>221 <span>发货</span></div>
                <div>332 <span>订单</span></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="p-col-12 p-lg-4">
      <div class="graph">
        <div class="p-grid">
          <div class="p-col-4">
            <span class="graph-title">访客数</span>
            <span class="graph-value">52003</span>
            <span class="graph-change">+32</span>
          </div>
          <div class="p-col-8">
            <img
              alt="Chart 1"
              src="assets/layout/images/dashboard/graph-1.svg"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="p-col-12 p-lg-4">
      <div class="graph">
        <div class="p-grid">
          <div class="p-col-4">
            <span class="graph-title">注册数</span>
            <span class="graph-value">532</span>
            <span class="graph-change">+24792</span>
          </div>
          <div class="p-col-8">
            <img
              alt="Chart 2"
              src="assets/layout/images/dashboard/graph-2.svg"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="p-col-12 p-lg-4">
      <div class="graph">
        <div class="p-grid">
          <div class="p-col-4">
            <span class="graph-title">销售额</span>
            <span class="graph-value">￥5521</span>
            <span class="graph-change">+243</span>
          </div>
          <div class="p-col-8">
            <img
              alt="Chart 3"
              src="assets/layout/images/dashboard/graph-3.svg"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="p-col-12 p-md-6 p-lg-4 task-list">
      <div class="card">
        <h5>任务</h5>
        <ul>
          <li>
            <Checkbox name="task" value="reports" v-model="tasksCheckbox" />
            <span class="task-name">销售报告</span>
            <i class="pi pi-briefcase"></i>
          </li>
          <li>
            <Checkbox name="task" value="pay" v-model="tasksCheckbox" />
            <span class="task-name">支付发票</span>
            <i class="pi pi-file"></i>
          </li>
          <li>
            <Checkbox name="task" value="dinner" v-model="tasksCheckbox" />
            <span class="task-name">与客户吃饭</span>
            <i class="pi pi-comments"></i>
          </li>
          <li>
            <Checkbox name="task" value="meeting" v-model="tasksCheckbox" />
            <span class="task-name">开会</span>
            <i class="pi pi-users"></i>
          </li>
          <li>
            <Checkbox name="task" value="theme" v-model="tasksCheckbox" />
            <span class="task-name">新主题</span>
            <i class="pi pi-palette"></i>
          </li>
          <li>
            <Checkbox name="task" value="ticket" v-model="tasksCheckbox" />
            <span class="task-name">发机票</span>
            <i class="pi pi-ticket"></i>
          </li>
          <li>
            <Checkbox name="task" value="charts" v-model="tasksCheckbox" />
            <span class="task-name">生成图表</span>
            <i class="pi pi-chart-bar"></i>
          </li>
          <li>
            <Checkbox name="task" value="client" v-model="tasksCheckbox" />
            <span class="task-name">致电客户</span>
            <i class="pi pi-mobile"></i>
          </li>
        </ul>
      </div>
    </div>

    <div class="p-col-12 p-md-6 p-lg-4 p-fluid contact-form">
      <div class="card">
        <h5>联系我们</h5>
        <div class="p-grid">
          <div class="p-col-12">
            <Dropdown
              v-model="dropdownCity"
              :options="dropdownCities"
              optionLabel="name"
              placeholder="选择一个城市"
            />
          </div>
          <div class="p-col-12">
            <InputText type="text" placeholder="姓名" />
          </div>
          <div class="p-col-12">
            <InputText type="text" placeholder="年龄" />
          </div>
          <div class="p-col-12">
            <InputText type="text" placeholder="电话" />
          </div>
          <div class="p-col-12">
            <Button type="button" label="Send" icon="pi pi-check" />
          </div>
        </div>
      </div>
    </div>

    <div class="p-col-12 p-lg-4 contacts">
      <div class="card">
        <h5>团队</h5>
        <ul>
          <li class="clearfix">
            <img alt="User" src="assets/layout/images/avatar.png" width="45" />
            <div class="contact-info">
              <span class="name">麦迪逊·休斯（我）</span>
              <span class="location">jane@pn-manhattan.com</span>
            </div>
            <div class="contact-actions">
              <span class="connection-status online">在线</span>
              <i class="pi pi-fw pi-comment"></i>
              <i class="pi pi-fw pi-reply"></i>
            </div>
          </li>
          <li class="clearfix">
            <img
              alt="Contact 1"
              src="assets/layout/images/avatar1.png"
              width="45"
            />
            <div class="contact-info">
              <span class="name">约书亚·威廉姆斯</span>
              <span class="location">joshua@pn-manhattan.com</span>
            </div>
            <div class="contact-actions">
              <span class="connection-status online">在线</span>
              <i class="pi pi-fw pi-comment"></i>
              <i class="pi pi-fw pi-reply"></i>
            </div>
          </li>
          <li class="clearfix">
            <img
              alt="Contact 2"
              src="assets/layout/images/avatar2.png"
              width="45"
            />
            <div class="contact-info">
              <span class="name">艾米丽·克拉克</span>
              <span class="location">emily@pn-manhattan.com</span>
            </div>
            <div class="contact-actions">
              <span class="connection-status offline">离线</span>
              <i class="pi pi-fw pi-comment"></i>
              <i class="pi pi-fw pi-reply"></i>
            </div>
          </li>
          <li class="clearfix">
            <img
              alt="Contact 3"
              src="assets/layout/images/avatar3.png"
              width="45"
            />
            <div class="contact-info">
              <span class="name">蒂姆·约翰逊</span>
              <span class="location">tim@pn-manhattan.com</span>
            </div>
            <div class="contact-actions">
              <span class="connection-status online">在线</span>
              <i class="pi pi-fw pi-comment"></i>
              <i class="pi pi-fw pi-reply"></i>
            </div>
          </li>
          <li class="clearfix">
            <img
              alt="Contact 4"
              src="assets/layout/images/avatar4.png"
              width="45"
            />
            <div class="contact-info">
              <span class="name">大卫·斯塔克</span>
              <span class="location">kelly@pn-manhattan.com</span>
            </div>
            <div class="contact-actions">
              <span class="connection-status offline">离线</span>
              <i class="pi pi-fw pi-comment"></i>
              <i class="pi pi-fw pi-reply"></i>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="p-col-12 p-lg-8 chat">
      <div class="card">
        <h5>聊天</h5>
        <ul>
          <li class="clearfix message-from">
            <img alt="Contact 2" src="assets/layout/images/avatar2.png" />
            <span>晚上一起吃饭吗？</span>
          </li>
          <li class="clearfix message-own">
            <img alt="User" src="assets/layout/images/avatar.png" />
            <span>可以，请问去哪里</span>
          </li>
          <li class="clearfix message-from">
            <img alt="Contact 2" src="assets/layout/images/avatar2.png" />
            <span>公司旁边的酒吧，我六点下班，然后我去接你？</span>
          </li>
          <li class="clearfix message-own">
            <img alt="User" src="assets/layout/images/avatar.png" />
            <span>我突然想起，我还有一些事情要处理，可以晚一点吗？</span>
          </li>
          <li class="clearfix message-own">
            <img alt="User" src="assets/layout/images/avatar.png" />
            <span>那八点钟如何？</span>
          </li>
          <li class="clearfix message-from">
            <img alt="Contact 2" src="assets/layout/images/avatar2.png" />
            <span>可以到时候见吧。</span>
          </li>
          <li class="clearfix message-own">
            <img alt="User" src="assets/layout/images/avatar.png" />
            <span>好的，到时候见。</span>
          </li>
        </ul>
        <div class="new-message">
          <div class="message-attachment">
            <i class="pi pi-paperclip"></i>
          </div>
          <div class="message-input">
            <input type="text" placeholder="发消息" class="p-inputtext" />
          </div>
        </div>
      </div>

      <div class="card">
        <h5>最近销售</h5>
        <DataTable
          :value="products"
          class="p-datatable-customers"
          :rows="5"
          style="margin-bottom: 20px"
          :paginator="true"
        >
          <Column>
            <template #header> Logo </template>
            <template #body="slotProps">
              <img
                :src="'assets/demo/images/product/' + slotProps.data.image"
                :alt="slotProps.data.image"
                width="50px"
              />
            </template>
          </Column>
          <Column field="name" header="名称" sortable></Column>
          <Column field="category" header="类别" sortable></Column>
          <Column field="price" header="价格" sortable>
            <template #body="slotProps">
              {{ formatCurrency(slotProps.data.price) }}
            </template>
          </Column>
          <Column>
            <template #header> 操作 </template>
            <template #body>
              <Button
                icon="pi pi-search"
                type="button"
                class="p-button-success p-mr-2 p-mb-1"
              ></Button>
              <Button
                icon="pi pi-times"
                type="button"
                class="p-button-danger p-mb-1"
              ></Button>
            </template>
          </Column>
        </DataTable>
      </div>
    </div>

    <div class="p-col-12 p-lg-4">
      <div class="card timeline p-fluid">
        <div class="p-grid">
          <div class="p-col-3">
            <span class="event-time">现在</span>
            <i class="pi pi-globe" style="color: #3984b8"></i>
          </div>
          <div class="p-col-9">
            <span class="event-owner" style="color: #3984b8">凯瑟琳·梅</span>
            <span class="event-text">Lorem ipsun dolor amet</span>
            <div class="event-content">
              <img
                alt="Bridge"
                src="assets/layout/images/dashboard/bridge.png"
                width="100"
              />
            </div>
          </div>

          <div class="p-col-3">
            <span class="event-time">12小时前</span>
            <i class="pi pi-star-o" style="color: #f6ac2b"></i>
          </div>
          <div class="p-col-9">
            <span class="event-owner" style="color: #f6ac2b"
              >布兰登·桑托斯</span
            >
            <span class="event-text"
              >Ab nobis, magnam sunt eum. Laudantium, repudiandae,
              similique!.</span
            >
          </div>

          <div class="p-col-3">
            <span class="event-time">15小时前</span>
            <i class="pi pi-comment" style="color: #7e8dcd"></i>
          </div>
          <div class="p-col-9">
            <span class="event-owner" style="color: #7e8dcd">斯蒂芬·沃德</span>
            <span class="event-text"
              >Omnis veniam quibusdam ratione est repellat qui nam quisquam ab
              mollitia dolores ullam voluptates, similique, dignissimos.</span
            >
            <div class="event-content">
              <img
                alt="Nature"
                src="assets/demo/images/nature/nature1.jpg"
                width="100"
              />
            </div>
          </div>

          <div class="p-col-3">
            <span class="event-time">2天前</span>
            <i class="pi pi-map-marker" style="color: #e175a0"></i>
          </div>
          <div class="p-col-9">
            <span class="event-owner" style="color: #e175a0">杰森·史密斯</span>
            <span class="event-text">Laudantium, repudiandae, similique!</span>
            <div class="event-content">
              <img alt="Map" src="assets/layout/images/dashboard/map.png" />
            </div>
          </div>

          <div class="p-col-3">
            <span class="event-time">1周前</span>
            <i class="pi pi-heart" style="color: #39b8b6"></i>
          </div>
          <div class="p-col-9">
            <span class="event-owner">凯文·考克斯</span>
            <span class="event-text"
              >Quibusdam ratione est repellat qui nam quisquam veniam quibusdam
              ratione.</span
            >
          </div>

          <div class="p-col-3">
            <span class="event-time">2周前</span>
            <i class="pi pi-compass" style="color: #3eb839"></i>
          </div>
          <div class="p-col-9">
            <span class="event-owner" style="color: #3eb839">沃特·怀特</span>
            <span class="event-text">I am the one who knocks!</span>
          </div>

          <div class="p-col-12">
            <Button
              type="button"
              label="刷新"
              icon="pi pi-refresh"
              class="rounded-btn raised-btn"
            ></Button>
          </div>
        </div>
      </div>
    </div>

    <div class="p-col-12">
      <div class="card">
        <h5>日历</h5>
        <FullCalendar :events="events" :options="options" />
      </div>
    </div>
  </div>
</template>

<script>
import ProductService from "../api/ProductService";
import EventService from "../api/EventService";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

export default {
  data() {
    return {
      tasksCheckbox: [],
      dropdownCities: [
        { name: "New York", code: "NY" },
        { name: "Rome", code: "RM" },
        { name: "London", code: "LDN" },
        { name: "Istanbul", code: "IST" },
        { name: "Paris", code: "PRS" },
      ],
      dropdownCity: null,
      products: null,
      selectedProducts: null,
      options: {
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        defaultDate: "2016-01-12",
        header: {
          left: "prev,next",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay",
        },
        editable: true,
      },
      events: null,
    };
  },
  productService: null,
  eventService: null,
  created() {
    this.productService = new ProductService();
    this.eventService = new EventService();
  },
  mounted() {
    this.productService
      .getProductsSmall()
      .then((data) => (this.products = data));
    this.eventService.getEvents().then((data) => (this.events = data));
  },
  methods: {
    formatCurrency(value) {
      return value.toLocaleString("zh-CN", {
        style: "currency",
        currency: "USD",
      });
    },
  },
};
</script>

<style scoped>
</style>
